<template>
  <el-dialog
    :title="props.data.type === 2 ? '修改公告' : '新增公告'"
    v-model="dialogVisible"
    width="700px"
    @close="handleClose"
    align-center
    center
    :append-to-body="true"
    :close-on-click-modal="false"
    class="customer-dialog">
    <div class="dialog-content">
      <el-input
        v-model="content"
        :rows="8"
        type="textarea"
        resize="none"
        placeholder="请输入" />
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button
          type="primary"
          @click="confirmFn">
          保存
        </el-button>
        <el-button @click="cancelFn">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
  import { ElMessage } from 'element-plus';
  import { saveNotice, updateNotice } from '@/api/index';

  const props = defineProps({
    show: {
      type: Boolean,
      required: true
    },
    data: {
      type: Object,
      required: true
    }
  });

  const emit = defineEmits(['update:show', 'updateList']);

  const dialogVisible = computed({
    get() {
      return props.show;
    },
    set() {
      emit('update:show', false);
    }
  });

  let content = ref('');

  // 关闭
  function handleClose() {
    emit('update:show', false);
  }

  // 确认
  function confirmFn() {
    if (props.data.type === 1) {
      //新增
      saveNotice({
        content: content.value
      }).then(res => {
        ElMessage.success('保存成功');
        emit('updateList');
        handleClose();
      });
    } else {
      //修改
      updateNotice({
        id: props.data.id,
        content: content.value
      }).then(res => {
        ElMessage.success('修改成功');
        emit('updateList');
        handleClose();
      });
    }
  }

  // 取消
  function cancelFn() {
    emit('update:show', false);
  }

  onMounted(() => {
    if (props.data.type === 2) {
      content.value = props.data.content;
    }
  });
</script>

<style lang="scss" scoped></style>
